<template>
  <div class="menu-test">
    <div class="header">
      <h1>动态菜单测试页面</h1>
      <p>这个页面用于测试从API获取的动态菜单数据</p>
      <div class="nav-buttons">
        <el-button type="primary" @click="refreshMenu">刷新菜单</el-button>
        <el-button type="success" @click="goToDashboard">返回首页</el-button>
      </div>
    </div>
    
    <!-- 显示菜单数据 -->
    <div class="menu-data-container">
      <h2>菜单数据展示</h2>
      <el-collapse v-model="activeNames">
        <el-collapse-item 
          v-for="menu in menuData" 
          :key="menu.id" 
          :title="menu.menuName" 
          :name="menu.id"
        >
          <div class="menu-item">
            <p><strong>ID:</strong> {{ menu.id }}</p>
            <p><strong>父级ID:</strong> {{ menu.parentId }}</p>
            <p><strong>菜单名称:</strong> {{ menu.menuName }}</p>
            <p><strong>菜单级别:</strong> {{ menu.menuLevel }}</p>
            <p><strong>图标:</strong> {{ menu.menuIcon }}</p>
            <p><strong>URL:</strong> {{ menu.menuUrl }}</p>
            <p><strong>排序:</strong> {{ menu.orderNum }}</p>
            <p><strong>状态:</strong> {{ menu.status }}</p>
            <p><strong>是否隐藏:</strong> {{ menu.hidden ? '是' : '否' }}</p>
            
            <div v-if="menu.children && menu.children.length > 0" class="children-menu">
              <h4>子菜单:</h4>
              <el-collapse>
                <el-collapse-item 
                  v-for="child in menu.children" 
                  :key="child.id" 
                  :title="child.menuName" 
                  :name="child.id"
                >
                  <div class="child-menu-item">
                    <p><strong>ID:</strong> {{ child.id }}</p>
                    <p><strong>父级ID:</strong> {{ child.parentId }}</p>
                    <p><strong>菜单名称:</strong> {{ child.menuName }}</p>
                    <p><strong>菜单级别:</strong> {{ child.menuLevel }}</p>
                    <p><strong>图标:</strong> {{ child.menuIcon }}</p>
                    <p><strong>URL:</strong> {{ child.menuUrl }}</p>
                    <p><strong>排序:</strong> {{ child.orderNum }}</p>
                    <p><strong>状态:</strong> {{ child.status }}</p>
                    <p><strong>是否隐藏:</strong> {{ child.hidden ? '是' : '否' }}</p>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    
    <!-- 显示原始API响应 -->
    <div class="api-response-container">
      <h2>API原始响应</h2>
      <el-button @click="showRawData = !showRawData">
        {{ showRawData ? '隐藏' : '显示' }}原始数据
      </el-button>
      <div v-if="showRawData" class="raw-data">
        <pre>{{ JSON.stringify(rawApiResponse, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import { getSliderMenus } from '@/api/configApi'

export default {
  name: 'MenuTest',
  data() {
    return {
      menuData: [],
      rawApiResponse: null,
      activeNames: [],
      showRawData: false
    }
  },
  created() {
    this.loadMenuData()
  },
  methods: {
    async loadMenuData() {
      try {
        console.log('开始加载菜单数据...')
        const response = await getSliderMenus()
        console.log('API响应:', response)
        
        this.rawApiResponse = response
        
        // 处理不同的响应格式
        console.log('响应类型:', typeof response)
        console.log('是否为数组:', Array.isArray(response))
        console.log('响应内容:', response)
        
        if (Array.isArray(response)) {
          // 直接返回数组格式
          this.menuData = response
          console.log('菜单数据加载成功 (数组格式):', this.menuData)
        } else if (response && response.code === 200 && response.data && Array.isArray(response.data)) {
          // 标准响应格式 { code: 200, data: [...] }
          this.menuData = response.data
          console.log('菜单数据加载成功 (标准格式):', this.menuData)
        } else if (response && response.data && Array.isArray(response.data)) {
          // 其他可能的响应格式
          this.menuData = response.data
          console.log('菜单数据加载成功 (其他格式):', this.menuData)
        } else if (response && Array.isArray(response)) {
          // 再次检查数组格式
          this.menuData = response
          console.log('菜单数据加载成功 (二次检查数组格式):', this.menuData)
        } else {
          console.error('菜单数据格式不正确:', response)
          console.error('响应详情:', {
            type: typeof response,
            isArray: Array.isArray(response),
            hasCode: response && response.code !== undefined,
            hasData: response && response.data !== undefined,
            dataIsArray: response && response.data && Array.isArray(response.data)
          })
          this.$message.error('菜单数据格式不正确')
        }
      } catch (error) {
        console.error('加载菜单数据失败:', error)
        this.$message.error('加载菜单数据失败: ' + error.message)
      }
    },
    
    refreshMenu() {
      this.loadMenuData()
      this.$message.success('菜单数据已刷新')
    },
    
    goToDashboard() {
      this.$router.push('/dashboard')
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-test {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
  
  .header {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    h1 {
      color: #333;
      margin: 0 0 10px 0;
      font-size: 24px;
    }
    
    p {
      color: #666;
      margin: 0 0 15px 0;
      font-size: 14px;
    }
    
    .nav-buttons {
      display: flex;
      gap: 10px;
    }
  }
  
  .menu-data-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    h2 {
      color: #333;
      margin: 0 0 20px 0;
      font-size: 18px;
    }
    
    .menu-item {
      padding: 15px;
      background: #f9f9f9;
      border-radius: 4px;
      margin-bottom: 10px;
      
      p {
        margin: 5px 0;
        font-size: 14px;
        color: #666;
      }
      
      .children-menu {
        margin-top: 15px;
        
        h4 {
          color: #333;
          margin: 0 0 10px 0;
          font-size: 16px;
        }
        
        .child-menu-item {
          padding: 10px;
          background: #fff;
          border-radius: 4px;
          border: 1px solid #e0e0e0;
          
          p {
            margin: 3px 0;
            font-size: 13px;
            color: #555;
          }
        }
      }
    }
  }
  
  .api-response-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    h2 {
      color: #333;
      margin: 0 0 15px 0;
      font-size: 18px;
    }
    
    .raw-data {
      margin-top: 15px;
      
      pre {
        background: #f5f5f5;
        padding: 15px;
        border-radius: 4px;
        overflow-x: auto;
        font-size: 12px;
        line-height: 1.4;
        color: #333;
        border: 1px solid #e0e0e0;
      }
    }
  }
}
</style>
